<template>
  <div class="contentBox">
    <div class="companyName">
      <div class="fc-888">{{collapseName}}</div>
      <div class="acea-row">
		<span style="margin-right: 15rpx;">{{ price }}元</span>
        <image :class="isOpen ? 'rightArrowImg' : 'rightArrowImgA'"
             src="/static/yixiao-collapseItem/farm.png"
             alt />
      </div>
    </div>
    <view :class="isOpen ? 'content-open' : 'content-close'">
      <slot name="content"></slot>
    </view>
  </div>
</template>

<script>
export default {
  props: {
    collapseName: {
      type: String,
      default: null,
    },
	price: {
	  type: String,
	  default: 0,
	},
    data: {
      type: Object,
      default: null,
    },
    config: {
      type: Array,
      default: null,
    },
  },
  data () {
    return {
      isOpen: false,
    };
  },
  methods: {
    imgClick (path) {
      uni.previewImage({
        current: path, // 当前显示图片的http链接
        urls: [path], // 需要预览的图片http链接列表
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  overflow: hidden;
  
  .companyName {
    display: flex;
    align-items: center;
	padding: 0 30rpx;
	
    div {
      height: 100%;
      &:nth-child(1) {
        flex: 1;
        display: flex;
        align-items: center;
      }
      &:nth-child(2) {
        // width: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
		
        image {
          width: 30rpx;
          height: 30rpx;
		  margin-right: 18rpx;
        }
      }
    }
  }

  .box {
    display: flex;
    .lable {
      width: 175rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #949599;
    }
    .lableValue {
      flex: 1;
      font-size: 26rpx;
      font-weight: 500;
      color: #313133;
      img {
        width: 180rpx;
        height: 120rpx;
      }
    }
  }
}
.rightArrowImg {
  transform: rotate(180deg);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.rightArrowImgA {
  transform: rotate(0deg);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.content-open {
	padding: 30rpx 100rpx 30rpx 50rpx;
	margin-top: 20rpx;
	background-color: #F9FAFE;
	// color: #888;
	font-size: 28rpx;
  // height: 500rpx;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.content-close {
	padding: 0 100rpx 0 50rpx;
  height: 0rpx;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.item-open {
  height: auto;
  margin-bottom: 25rpx;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}
.item-close {
  opacity: 0;
  height: 0;
}
</style>